html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

::selection {
  background: var(--gray-container-3);
}

body {
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 49px;
}

@layer global-reset {
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

.shiki,
.shiki span,
[data-theme],
[data-theme] span {
  color: var(--shiki-light) !important;
  background-color: var(--shiki-light-bg) !important;
  /* Optional, if you also want font styles */
  font-style: var(--shiki-light-font-style) !important;
  font-weight: var(--shiki-light-font-weight) !important;
  text-decoration: var(--shiki-light-text-decoration) !important;
}

html.dark .shiki,
html.dark [data-theme],
html.dark .shiki span,
html.dark [data-theme] span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  /* Optional, if you also want font styles */
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}
